Gatsby可以以Markdown作為資料來源自動產生頁面，這讓我們可以輕易的建立Blog之類的網站：寫blog只需寫markdown。

YouTube Video:

gatsby-source-filesystem

我們要從Markdown文件中取得頁面內容需要gatsby-source-filesystem的幫助：

npm install --save gatsby-source-filesystem

安裝完成後，需要在gatsby-config.js的plugins部分，加入這個plugin。這次，我們要進行一些設定：

{
  resolve: 'gatsby-source-filesystem',
  options: {
    path: `${__dirname}/src/pages`,
    name: 'pages',
  }
}

resolve是plugin名稱，options是設定，其中path是文件存放目錄，${__dirname}是工作目錄，即這個網站的所在目錄，由於用到變量，我們用 backtick: ` （數字1左邊的那個按鍵），而不是引號。name是存放文件的目錄名稱。

gatsby-transformer-remark

接著，我們需要將從Markdown文件讀取出來的數據轉化成Gatsby能夠透過GraphQL提取的內容，這就需要另一個plugin：gatsby-transformer-remark

npm install --save gatsby-transformer-remark

這個plugin功能很強大，也能透過gatsby-config.js進行設定，但目前我們只要把它加入plugins裡：

'gatsby-transformer-remark'

有了這兩個Plugin，Gatsby就能夠從Markdown文件中透過GraphQL讀取資料。

建立blog文章

在/src/pages底下，新增文件夾：20-08-2018-blog-post-1，在裡面新增index.md文件，這便是blog文章所在位置。

這個文件的由frontmatter開始。frontmatter是網站的基本資料，如title。以下是我們的index.md：

---
path: 'blog-post-1'
title: 'My post'
---

# Post Heading

templates

blog的文章要怎樣呈現？這就需要用到模版，讓所有的文章都使用相同的模版。

在/src底下，新增templates目錄，在其中新增post.js作為模版文件，其內容為：

import react from 'react';
import Helmet from 'react-helmet';

export default function Template({data}) {
  const {markdownRemark: post} = data;
  return (
    <div>
      <h1>{post.frontmatter.title}</h1>
    </div>
  )
}

參數data是由GraphQL送進來的數據，也就是Markdown文件裡面的內容。這些數據存放在markdownRemark變量當中，我們把它提取並存入post變量中，接著就可以透過post.frontmatter.title使用frontmatter中的title內容。

我們還要在template中加入GraphQL的query：

export const postQuery = graphql`
  query BlogPostByPath($path: String!) {
    markdownRemark(frontmatter: { path: { eq: $path } }) {
      html
      frontmatter {
        path
        title
      }
    }
  }
`

這段query是要透過路徑（參數：$path）取得對應的文章。

graphql開始是GraphQL的內容。第二行的BlogPostByPath是這段query的名稱，其接受一個參數：$path。我們要在markdownRemark中找frontmatter的path等於參數給予的$path的數據，找到後，我們要取得其html以及frontmatter中的path和title當中存放的內容。

下一步是要用Gatsby的createPages API創建頁，這部分的內容，我們留到明天繼續。

同步發表於：NodeJust.com